<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>谈心谈话</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/LogCss.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        #tb1 tr:hover td {
            background-color: #F3F3F3;
        }
        button:hover{
            cursor:pointer;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- header -->
    <div th:replace="~{commons/header::header}"></div>

    <!-- left -->
    <div th:replace="~{commons/instructorLeft::left}"></div>
    <!-- 内容主体区域 -->
    <div class="layui-body" id="app">
        <!-- 全局遮罩 -->


        <div id="showLogInfo" v-if="showLogInfo">
            <div id="showLogInfo_table" style="margin-top: 2%;margin-left: 15%;">
                <div style="height: 35px;border-bottom: 1px solid #0C0C0C;">
                    <div><p style="margin-left: 10px;margin-top:7px;font-size: 17px;float: left"><strong>新增谈心谈话记录</strong></p></div>
                </div>
                <div>
                    <div style="margin-top: 10px;">
                        <form action="/log_add" method="post" style="margin: auto;width: 85%;" id="addForm">
                            <table style="margin: auto;font-size: 12px;">
                                <tr style="height: 60px">
                                    <td style="width: 12%;">学号：</td><td><input onkeyup="value=value.replace(/[^\d]/g,'')" v-model="input[0]" placeholder="请输入内容" name="stu_id" class="input_td"><button type="button" @click="SelectStu(input[0])" style="margin-left: 5px;border: none;background-color: #ffffdd ;color: indianred;border-radius: 2px 2px 2px 2px;height:20px;font-size: 8px">校验</button></td>
                                    <td>谈话对象：</td><td><input v-model="selectStu[0].stu_name" placeholder="请输入内容" class="input_td" disabled="true"></td>
                                </tr>
                                <tr style="height: 60px">
                                    <td style="width: 12%;" >年级：</td><td><input v-model="selectStu[0].stu_grade" class="input_td" disabled="true"></td>
                                    <td>二级学院：</td><td><input v-model="selectStu[0].stu_college" class="input_td" disabled="true"></td>
                                </tr>
                                <tr style="height: 60px">
                                    <td>专业：</td><td><input v-model="selectStu[0].stu_major" placeholder="请输入内容" class="input_td" disabled="true"></td>
                                    <td>班级：</td><td><input v-model="selectStu[0].stu_class"  class="input_td" disabled="true"></td>
                                </tr>
                                <tr style="height: 60px;"><td>地点：</td><td><input v-model="input[6]" placeholder="请输入内容" name="log_place"  class="input_td" style="width: 90%;"></td>
                                    <td>时间：</td>
                                    <td><input v-model="input[5]" name="date" type="date" :max="date"></td>
                                </tr>
                                <tr style="height: 100px;"><td>内容：</td><td colspan="3"><textarea v-model="input[7]" placeholder="请输入内容" name="log_content" class="input_td" style="width: 90%;height: 80px; resize:none"></textarea></td> </tr>
                                <tr style="height: 60px;"><td>描述：</td><td colspan="3"><textarea v-model="input[8]" placeholder="请输入内容" name="log_describe" class="input_td" style="width: 90%;height: 40px;resize:none"></textarea></td></tr>
                                <input name="userId" :value=userId style="display: none;">
                            </table>
                            <div style="text-align: center;margin-top: 10px;">
                                <button type="button" @click="submit()" style="margin-left: -10px;margin-top:5px;height:35px;width: 100px;border: none;background-color:#169BD5;color: white;border-radius: 4px 4px 4px 4px;font-size: 8px;">增加</button>
                                <button @click="CloseShow()" style="margin-left: 10px;margin-top:5px;height:35px;width: 100px;border: none;color: black;border-radius: 4px 4px 4px 4px;font-size: 8px;">关闭</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="userInfo" id="userInfo">
            <div style="background-color: white;width: 50%;height: 80%;margin-top: 2%;margin-left: 15%;">
                <div style="height: 35px;border-bottom: 1px solid #0C0C0C;">
                    <div><p style="margin-left: 10px;margin-top:7px;font-size: 17px;float: left"><strong>谈心谈话详情</strong></p></div>
                </div>
                <table  style="margin: auto;font-size: 12px;">
                    <tr style="height: 60px">
                        <td style="width: 12%;">学号：</td><td><input :value="userInfoArr.stu_id" class="input_td" readonly="readonly"></td>
                        <td style="width: 12%;">学院：</td><td><input :value="userInfoArr.stu_college" class="input_td"  readonly="readonly"></td>
                    </tr>
                    <tr style="height: 60px">
                        <td>专业：</td><td><input :value="userInfoArr.stu_major" class="input_td"  readonly="readonly"></td>
                        <td>班级：</td><td><input :value="userInfoArr.stu_class" class="input_td"  readonly="readonly"></td>
                    </tr>
                    <tr style="height: 60px">
                        <td>谈话对象：</td><td><input :value="userInfoArr.stu_name" class="input_td"  readonly="readonly"></td>
                        <td>时间：</td><td><input :value="userInfoArr.log_stu_date" class="input_td"  readonly="readonly"></td>
                    </tr>
                    <tr style="height: 60px"><td>地点：</td><td colspan="3"><input :value="userInfoArr.log_place" class="input_td"  readonly="readonly"></td></tr>
                    <tr style="height: 100px"><td>内容：</td><td colspan="3"><textarea :value="userInfoArr.log_content" class="input_td"  readonly="readonly" style="width: 90%;height: 80px;resize:none"></textarea></td></tr>
                    <tr style="height: 60px"><td>描述：</td><td colspan="3"><textarea :value="userInfoArr.log_describe" class="input_td"  readonly="readonly" style="width: 90%;height: 40px;resize:none"></textarea></td></tr>
                    <tr style="height: 60px"><td>提交人：</td><td colspan="3"><input :value="userInfoArr.log_sta_name" class="input_td"  readonly="readonly"></td></tr>
                </table>
                <div style="text-align: center;margin-top:20px;">
                    <button @click="CloseInfoShow()" style="margin-left: 10px;margin-top:5px;height:35px;width: 100px;border: none;color: black;border-radius: 4px 4px 4px 4px;font-size: 8px;">关闭</button>
                </div>

            </div>
        </div>

        <div v-if="showUpData" style="position :fixed;width: 100%;height: 100%;z-index: 999;background-color: rgba(0,0,0,0.5);">
            <div style="background-color: white;width: 50%;height: 80%;margin-top: 2%;margin-left: 15%;">
                <div style="height: 35px;border-bottom: 1px solid #0C0C0C;">
                    <div><p style="margin-left: 10px;margin-top:7px;font-size: 17px;float: left"><strong>修改记录</strong></p></div>
                </div>
                <form action="/logWork_update" method="post" id="logWork_update">
                    <table style="margin: auto;font-size: 12px;">
                        <tr style="height: 60px">
                            <td style="width: 12%;">学号：</td><td><input v-bind:value="userInfoArr.stu_id" name="stu_id" class="input_td" readonly="readonly" style="background-color: #FAFAFA"></td>
                            <td style="width: 12%;">学院：</td><td><input v-bind:value="userInfoArr.stu_college" class="input_td" readonly="readonly" style="background-color: #FAFAFA"></td>
                        </tr>
                        <tr style="height: 60px">
                            <td>专业：</td><td><input v-bind:value="userInfoArr.stu_major" class="input_td" readonly="readonly" style="background-color: #FAFAFA"></td>
                            <td>班级：</td><td><input v-bind:value="userInfoArr.stu_class" class="input_td" readonly="readonly" style="background-color: #FAFAFA"></td>
                        </tr>
                        <tr style="height: 60px">
                            <td>谈话对象：</td><td><input v-bind:value="userInfoArr.stu_name" class="input_td" readonly="readonly" style="background-color: #FAFAFA"></td>
                            <td>时间：</td><td><input v-bind:value="userInfoArr.log_stu_date" name="log_stu_date" class="input_td" type="date"  :max="date"></td>
                        </tr>
                        <tr style="height: 60px"><td>地点：</td><td colspan="3"><input v-bind:value="userInfoArr.log_place" name="log_place" class="input_td"></td></tr>
                        <tr style="height: 100px"><td>内容：</td><td colspan="3"><textarea v-bind:value="userInfoArr.log_content" name="log_content" class="input_td" style="width: 90%;height: 80px;resize:none"></textarea></td></tr>
                        <tr style="height: 60px"><td>描述：</td><td colspan="3"><textarea v-bind:value="userInfoArr.log_describe" name="log_describe" class="input_td" style="width: 90%;height: 40px;resize:none"></textarea></td></tr>
                        <input v-bind:value="userInfoArr.log_talk_id" name="log_talk_id" style="display: none">
                    </table>
                    <div style="text-align: center;margin-top:20px;">
                        <button type="button" @click="submit2()" style="margin-left: -10px;margin-top:5px;height:35px;width: 100px;border: none;background-color:#169BD5;color: white;border-radius: 4px 4px 4px 4px;font-size: 8px;">修改</button>
                        <button @click="CloseUpDataShow()" style="margin-left: 10px;margin-top:5px;height:35px;width: 100px;border: none;color: black;border-radius: 4px 4px 4px 4px;font-size: 8px;">关闭</button>
                    </div>
                </form>
            </div>
        </div>

        <div id="left_table" class="left_table" style="width: 90%;float: left;">
            <div style="width: 100%;margin-left: 40px;margin-top: 40px;height: 50px;">
                <div>

                        <input v-model="select[0]" placeholder="请输入学生姓名" style="width: 20%;height:30px;float: left;border-radius: 3px 3px 3px 3px;border-color: #e0e0e0;border-style:solid;border-width:1px;text-indent: 5px;">
                        <input v-model="select[1]" placeholder="请输入院系" style="width: 20%;height:30px;float: left;border-radius: 3px 3px 3px 3px;border-color: #e0e0e0;border-style:solid;border-width:1px;text-indent: 5px;margin-left: 10px">
                        <input v-model="select[2]" placeholder="请输入专业" style="width: 20%;height:30px;float: left;border-radius: 3px 3px 3px 3px;border-color: #e0e0e0;border-style:solid;border-width:1px;text-indent: 5px;margin-left: 10px">
                       <input type="button" value="查询" class="get" @click="GetWorkInfoSelect(select[0],select[1],select[2])" style="float: left;margin-left: 10px;height:30px;width: 50px;border: none;background-color: rgb(22,155,213);color: white;">
                </div>
            </div>
            <div style="margin-top: 10px;">
                <table  style="width: 90%; font-size: 16px;text-align: center;margin: 0 auto;border-collapse: separate;border-spacing: 0;border: 2px #e0e0e0;" id="tb1">
                    <div style="width: 30px;">
                        <tr style="background: #efefef;font-size: 14px;">
                            <td style="height: 50px;border-top-left-radius: 12px;">谈话时间</td><td>院系</td><td>年级</td><td>专业</td>
                            <td>班级</td><td>谈话对象</td><td>提交人</td><td style="border-top-right-radius: 12px;">操作</td>
                        </tr>
                    </div>
                    <tr v-for="(user,index) in arr" style="height: 60px;border-bottom: 2px solid #eaeaea;font-size: 13px;">
                        <td style="color: #00a7d0">{{user.log_stu_date}}</td><td>{{user.stu_college}}</td>
                        <td>{{user.stu_grade}}</td><td>{{user.stu_major}}</td>
                        <td>{{user.stu_class}}</td><td>{{user.stu_name}}</td>
                        <td>{{user.log_sta_name}}</td>
                        <td>
                            <button @click="showUserInfo(arr[index])" style="background-color:transparent;border-style:none;color: #00a7d0;">详情</button>
                            <button @click="UpDataInfo(arr[index])" style="background-color:transparent;border-style:none;color: #00a7d0;">编辑</button>
                            <button @click="DeleteLog(user.log_talk_id)" style="background-color:transparent;border-style:none;color: red;">移除</button>
                        </td>
                    </tr>
                </table>
            </div>

            <!-- 谈话记录表格 -->

        </div>

        <div class="right_table">
            <input type="button" value="+新增谈心谈话记录" class="post" @click="showLogInfoShow()" style="margin-left: -60px;margin-top:50px;height:35px;width: 120px;border: none;background-color: rgb(27,172,111);color: white;border-radius: 4px 4px 4px 4px;font-size: 8px;">
        </div>


    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>

<script>
    layui.use('element', function() {
        var element = layui.element;
    });
    new Vue({
            el:"#app",
            data:{
                log:[1,1,1,1],
                arr:[],
                userInfoArr:[],
                input:[],
                input1:[],
                selectStu:[{
                    stu_grade:"请输入学号后校验！",
                    stu_class:"请输入学号后校验！",
                    stu_college:"请输入学号后校验！",
                    stu_name:"请输入学号后校验！",
                    stu_sex:"请输入学号后校验！",

                }],
                showLogInfo:false,
                userInfo:false,
                showUpData:false,
                userId:[[${session.loginInfo.userId}]],
                OK:false,
                date:"",
                select:[],
            },
            mounted(){
                this.GetInfo();
                this.GetDate();
            },
            methods:{
                //获取谈话记录
                GetDate:function () {
                    var date = new Date();
                    var year = date.getFullYear();
                    var month = ('0'+ (date.getMonth() + 1)).slice(-2);
                    var day = ('0' + date.getDate()).slice(-2);

                    this.date= year +'-'+ month +'-'+ day;
                },
                GetInfo:function () {
                    var that = this;
                    axios.get("http://localhost:8443/LogTalkList/UserId/"+that.userId).then(function (response) {
                        console.log(response.data);
                        that.arr = response.data;
                    },function (err) {
                        console.log(err);
                    })
                },

                GetWorkInfo:function (log_sta) {
                    if (log_sta != null && log_sta!="") {
                        var that = this;
                        axios.get("http://localhost:8443/LogStaTalkList/" + log_sta).then(function (response) {
                            console.log(response.data);
                            that.arr = response.data;
                        }, function (err) {
                            console.log(err);
                        })
                    }else {
                        this.GetInfo();
                    }
                },
                GetWorkInfoSelect:function (stu_name,stu_college,stu_major) {
                        var that = this;
                        let params = new URLSearchParams();
                        params.append('userId', this.userId);
                        params.append('stu_name', stu_name?stu_name:"");
                        params.append('stu_college', stu_college?stu_college:"");
                        params.append('stu_major', stu_major?stu_major:"");
                        axios.post("http://localhost:8443/LogStaTalkListSelect",params).then(function (response) {
                            console.log(response.data);
                            that.arr = response.data;
                        },function (err) {
                            console.log(err);
                        })
                },
                //删除谈话记录
                DeleteLog:function (log_id) {
                    if(!confirm("确定操作所选记录吗?")) return;
                    var that = this
                    axios.get("http://localhost:8443/log_delete/"+log_id).then(function (response) {
                        console.log(response.data);
                        that.GetInfo();
                        alert("删除成功!");
                    },function (err) {
                        console.log(err);
                        alert("删除失败!");
                    })
                },
                //------

                //全局遮罩------
                showLogInfoShow:function () {
                    this.showLogInfo = true;
                },

                CloseShow:function () {
                    this.input.length = 0;
                    this.selectStu = [];
                    this.ResetStu();
                    this.showLogInfo = false;
                },
                //------

                //详情资料
                showUserInfo:function(arr){
                    this.userInfo=true;
                    this.userInfoArr=arr;
                },

                CloseInfoShow:function () {
                    this.userInfo=false;
                },

                //更新资料
                UpDataInfo:function(arr){
                    this.showUpData=true;
                    this.userInfoArr=arr;
                },
                CloseUpDataShow:function () {
                    this.showUpData=false;
                },
                SelectStu:function(stu_id){
                    if (stu_id !=null){
                        var that = this;
                        axios.get("http://localhost:8443/select_stu/"+stu_id).then(function (response) {
                            console.log(response.data);
                            if(response.data.length!=0){
                                that.selectStu = response.data;
                                that.OK = true;
                                alert("校验成功！");
                            }else{
                                that.ResetStu();
                                alert("无该学生！重新输入");
                            }
                        },function (err) {
                            console.log(err);
                            alert("无该学生！重新输入");
                        })
                    }else{
                        alert("请输入学号查询！");
                    }
                },
                ResetStu:function () {
                    this.selectStu.length=0;
                    this.selectStu[0]= {
                        stu_grade: "请输入学号后验证！",
                        stu_class: "请输入学号后验证！",
                        stu_college: "请输入学号后验证！",
                        stu_name: "请输入学号后验证！",
                    };
                },
                submit:function () {
                    if(this.OK == false) {
                        alert("请输入有效学号后校验!");
                    }else{
                       var addForm = document.getElementById("addForm");
                        if(addForm.log_place.value !== "" && addForm.log_content.value !=="" && addForm.log_describe.value !==""){
                            if(!confirm("确定操作所选记录吗?")) return;
                            addForm.submit();
                        }else {
                            alert("输入完整信息！");
                        }
                    }
                },
                submit2:function () {
                        var logWork_update = document.getElementById("logWork_update");
                        if(logWork_update.log_place.value !== "" && logWork_update.log_content.value !=="" && logWork_update.log_describe.value !==""){
                            if(!confirm("确定操作所选记录吗?")) return;
                            logWork_update.submit();
                        }else {
                            alert("输入完整信息！");
                        }
                },
            }
        }
    )
</script>
</body>
</html>